<template>
  <base-layout :visibleContent="false">
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row class="">
          <el-col :span="12">项目信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col
            :span="4"
            class="avatat_center"
          >
            <el-upload
              action=""
              :show-file-list="false"
              list-type="picture-card"
              :http-request="httpRequest"
            >
              <i
                v-if="!iconUrl"
                class="el-icon-plus"
              ></i>
              <img
                v-if="iconUrl"
                :src="iconUrl"
                alt=""
                class="avatar"
              />
            </el-upload>
            <!-- <el-avatar :size="80"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar> -->
          </el-col>
          <el-col :span="20">
            <el-form-item label="项目名称:">
              <el-input
                clearable
                v-model="fromdata.projectName"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item
              label="所属门店:"
              prop="type"
            >
              <job-shop
                v-model="fromdata.storeId"
                placeholder="所属门店"
              />
            </el-form-item>
            <el-form-item label="状态:">
              <el-switch
                v-model="fromdata.status"
                style="width: 203px"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>

            <el-form-item
              label="项目类型:"
              prop="type"
            >
              <el-select
                clearable
                ref="dragSelect"
                v-model="fromdata.projectDictId"
                class="drag-select"
              >
                <el-option
                  v-for="item in dict"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="工时费:">
              <el-input-number
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                :step="0.01"
                step-strictly
                v-model="fromdata.amount"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="项目工时:">
              <el-input-number
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                :step="0.01"
                step-strictly
                v-model="fromdata.workHours"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="项目提成点:">
              <el-input-number
                clearable
                :controls="false"
                :min="0"
                :max="100"
                :step="1"
                step-strictly
                v-model="fromdata.commission"
                placeholder="请输入"
              />
              <span>%</span>
            </el-form-item>
            <el-form-item
              label="一般维修:"
              prop="ordinaryMaintain"
            >
              <el-radio-group
                v-model="fromdata.ordinaryMaintain"
                style="width: 200px"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="项目介绍:">
              <el-input
                clearable
                v-model.number="fromdata.remark"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="24"
            align="right"
          >
            <el-button
              type="primary"
              @click="onSubmit"
            >保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </base-layout>
</template>
<script>
import { details, addData, updateData } from "@/api/after-sale/systemManage/project";
import { getDict, fileUpload, getImageUrl, parseTimeToYMDHMS, getServerDict } from "@/utils/index";
import baseMixin from "@/mixins/base";
export default {
  mixins: [baseMixin({})],
  props: {
    addType: {
      type: Boolean,
      default: true,
    }, // 跳入页面得类型 true 表示从系统管理的项目管理进来，false 表示从工单管理进来
  },
  data () {
    return {
      iconUrl: "", //Icon地址
      fromdata: {
        status: true,
        ordinaryMaintain: true
      },
      rules: {},
      dialogImageUrl: "",
      imageDialogVisible: false,
      dict: [],
    };
  },
  watch: {
    "fromdata.workHours": async function (nv, ov) {
      if (nv && Number.isInteger(nv)) {
        let hoersAmout = 1;
        try {
          let res = await getServerDict('项目1小时换算金额');
          hoersAmout = res[0].dictValue || 0;
          if (hoersAmout) {
            this.$set(this.fromdata, 'amount', Number(hoersAmout) * Number(nv))
          } else {
            this.$message.error("未设置工时费，请设置！")
          }
        } catch (error) {
          console.error(error)
        }
      } else {
        this.$set(this.fromdata, 'amount', 0)
      }
    }
  },
  async created () {
    const dict = getDict(["汽车项目类型"]);
    this.dict = dict["汽车项目类型"];
    if (this.$route.query && this.$route.query.id) {
      const { data } = await details(this.$route.query.id);
      this.fromdata = data;
      this.iconUrl = getImageUrl(data.icon);
    }
  },
  methods: {
    httpRequest (value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res;
        if (success) {
          this.fromdata.icon = data.id;
          this.iconUrl = getImageUrl(data.id);
        }
      });
    },
    onSubmit () {
      this.$refs.fromdata.validate((valid) => {
        if (valid) {
          this.saveData();
        } else {
          return false;
        }
      });
    },
    async saveData () {
      const { success, data } = this.fromdata.id
        ? await updateData(this.fromdata)
        : await addData(this.fromdata);
      if (success) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
        if (this.addType) {
          this.closeRouter();
        } else {
          let list = [];
          list.push(data);
          this.$emit("getList", list);
        }
      } else {
        this.$message.error("操作失败");
      }
    },
  },
};
</script>
<style scoped>
.avatat_center {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
